<template>
  <div class="Login-and-Registration">
    <button class="Login box" @click="btn">登录</button>
    <button class="Registration box">注册</button>
  </div>
</template>

<script>
export default {
  name: "LoginAndRegistration",
  props: ["userName", "password"],
  data() {
    return {
      collectionData: {
        userName: '',
        password: '',
      },
    }
  },
  watch: {
    userName: {
      handler(newResolve, oldResolve) {
        this.collectionData.userName = newResolve;
      }
    },
    password: {
      handler(newResolve, oldResolve) {
        this.collectionData.password = newResolve;
      }
    }
  },
  methods: {
    btn() {
      this.$bus.$emit("dataw", this.collectionData);

      this.$router.push("/home")
    }
  }
}
</script>

<style scoped>
  .Login-and-Registration {
    /* background-color: forestgreen; */
    padding: 20px;
    box-sizing: border-box;
  }
  .Login-and-Registration .box {
    font-size: 20px;
    width: 60%;
    /* height: 30px; */
    text-align: center;
    display: block;
    margin: auto;
    margin-bottom: 20px;
    background-color: rgb(0, 181, 166);
    color: #fff;
    padding: 5px;
    border-radius: 5px;
    font-weight: 700;
    Letter-spacing: 4px;
  }
  .Login-and-Registration .Registration {
    background-color: transparent;
  }
</style>